<template>
  <div class="basic-container">
    <div class="main-head">
      <div
        class="head-item"
        :class="{'headActive': activeMenu.nm === item.nm}"
        v-for="(item, ind) in menuList"
        :key="ind"
        @click="clickMenu(item)"
      >
        <div></div>
        <div>{{item.mc}}</div>
      </div>
    </div>
    <div class="main-body">
      <!-- 部队级别 -->
      <div v-show="activeMenu.nm === '1'" class="icon-items">
        <div
          v-for="(item, index) in zzjgIcons"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <el-image :src="item.icon ? require(`@/assets/image/bdjg/${item.icon}.png`) : null"></el-image>
          </div>
        </div>
      </div>
      <jsMind />
      <!-- 人员岗位 -->
      <div v-show="activeMenu.nm === '2'" class="icon-items">
        <div
          v-for="(item, index) in personnelList"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <el-image :src="item.icon ? require(`@/assets/image/${item.icon}.png`) : null" style="width: 42px;height: 107px;"></el-image>
          </div>
        </div>
      </div>
      <!-- 装备类别 -->
      <div v-show="activeMenu.nm === '3'" class="icon-items">
        <div
          v-for="(item, index) in equipmentList"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
          @click="wqzbClick(item)"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <el-image :src="item.icon ? require(`@/assets/image/wqzb/${item.icon}.png`) : null"></el-image>
          </div>
        </div>
      </div>
      <!-- 配套设施 -->
      <div v-show="activeMenu.nm === '4'" class="icon-items">
        <div
          v-for="(item, index) in facilityList"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <!-- <el-image :src="item.icon ? require(`@/assets/image/ptss/${item.icon}.png`) : null"></el-image> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 装备录入 -->
    <vxe-modal v-model="infoFomrVisible" :title="`【${wqzbItem.name}】静态属性`" width="60%" height="70%" :mask="true" :resize="true"
               :drag="true" :show-zoom="true" :transfer="true" showFooter class="attribute-modal">
      <template #default>
        <div style="height: 100%;">
          <vxe-table
            ref="refTable"
            class="table-inside"
            :data="staticDataList"
            :loading="staticTableLoading"
            border
            keep-source
            size="mini"
            :stripe="false"
            height="100%"
            style="font-size: 15px; color: #333"
            :span-method="objectSpanMethod"
            @edit-closed="editCloseEvent"
            :edit-config="{trigger: 'click', mode: 'cell'}"
          >
            <vxe-column type="seq" title="序号" width="80" align="center"></vxe-column>
            <vxe-column field="lx" title="分类" width="150" align="center" :filters="typeFilters"></vxe-column>
            <vxe-column field="value" title="内容" :edit-render="{}">
              <template #edit="{row}">
                <el-input v-model="row.value" size="small" placeholder=""></el-input>
<!--                <vxe-select v-model="row.value" transfer placeholder="请选择">-->
<!--                  <vxe-option v-for="item in restaurants" :key="item.XH" :label="item.MC" :value="item.MC"></vxe-option>-->
<!--                </vxe-select>-->
              </template>
            </vxe-column>
            <vxe-column field="bz" title="注释" width="" align=""></vxe-column>
          </vxe-table>
        </div>
      </template>
      <template #footer>
        <el-button size="" @click="infoFomrVisible = false;" >取消</el-button>
        <el-button type="primary" size="" @click="infoFomrVisible = false;">确定</el-button>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import { deduplicateByField} from '@/utils'
import jsMind from './jsMind.vue';
export default {
  name: 'basicContent',
  components: {
    jsMind
  },
  data(){
    return {
      staticTableLoading: false,
      infoFomrVisible: false,
      menuList: [
        { nm: "1", mc: "部队", tablename: "", modelId: "080903b57ad6419290b67ff072906edd", },
        { nm: "2", mc: "人员岗位", tablename: "", modelId: "080903b57ad6419290b67ff072906edd", },
        { nm: "3", mc: "装备类型", tablename: "", modelId: "8cb4e33f12844b21b177851c4864fbb2", },
        { nm: "4", mc: "设施类别", tablename: "", modelId: "957df8bb72fa44428db82495d574648c", },
      ],
      activeMenu:{},
      zzjgIcons: [
        {id:'1', name: '军', icon: '', level: 1 },
        {id:'2', name: '旅', icon: '', level: 2 },
        {id:'3', name: '营', icon: '营', level: 3 },
        {id:'4', name: '连', icon: '连', level: 4 },
        {id:'5', name: '排', icon: '排', level: 5 },
        {id:'6', name: '班', icon: '班', level: 6 },
      ],
      personnelList: [
        { name: '营长', icon: '25' },
        { name: '副营长', icon: '25' },
        { name: '连长', icon: '25' },
        { name: '副连长', icon: '25' },
        { name: '排长', icon: '25'},
        { name: '班长', icon: '25' },
        { name: '炮手', icon: '25' },
        { name: '士兵', icon: '25' },
        { name: '参谋', icon: '25' },
      ],
      equipmentList: [
        { name: '05式指挥车', icon: '指挥车'},
        { name: '05式步战车', icon: '步战车'},
        { name: '05式突击车', icon: '突击车'},
        { name: '05式抢修车', icon: '抢修车'},
        { name: '120迫榴车', icon: '迫榴车'},
      ],
      facilityList:[],
      wqzbItem: {},
      typeFilters: [],
      staticCol: [
        {ename: 'lx', cname: '分类', sfzs: '1'},
        {ename: 'field', cname: '字段', sfzs: '1'},
        {ename: 'mc', cname: '字段名称', sfzs: '0'},
        {ename: 'value', cname: '内容', sfzs: '1'},
      ],
      staticDataList: [
        {lx: '车辆基础属性', field:'ZDQZ', mc: '战斗全重', value: '', lg: '吨', bz: '战斗全重，车辆的战斗全重（单位：吨）'},
        {lx: '车辆基础属性', field:'CYRS', mc: '乘员数', value: '', lg: '', bz: '乘员数，车辆的成员数量'},
        {lx: '车辆基础属性', field:'CL', mc: '车长', value: '', lg: '米', bz: '车长，车辆的长度（单位：米）'},
        {lx: '车辆基础属性', field:'CK', mc: '车宽', value: '', lg: '米', bz: '车宽，车辆的宽度（单位：米）'},
        {lx: '车辆基础属性', field:'CG', mc: '车高', value: '', lg: '米', bz: '车高，车辆的高度（单位：米）'},
        {lx: '武器系统属性', field:'WQMC', mc: '武器名称', value: '', lg: '', bz: '武器名称，武器的名称'},
        {lx: '武器系统属性', field:'WQLX', mc: '武器类型', value: '', lg: '', bz: '武器类型,武器的类型（如主炮、机枪等）'},
        {lx: '武器系统属性', field:'WQKJ', mc: '武器口径', value: '', lg: '毫米', bz: '武器口径，武器的口径（单位：毫米）'},
        {lx: '武器系统属性', field:'PGSM', mc: '炮管寿命', value: '', lg: '发', bz: '炮管寿命，炮管的使用寿命（单位：发）'},
        {lx: '武器系统属性', field:'YXSC', mc: '有效射程', value: '', lg: '米', bz: '有效射程，武器的有效射程（单位：米）'},
        {lx: '武器系统属性', field:'SS', mc: '射速', value: '', lg: '发/分钟', bz: '射速，武器的射速（单位：发/分钟）'},
        {lx: '武器系统属性', field:'GDSJ', mc: '武器的高低射角', value: '', lg: '度', bz: '武器的高低射角（单位：度）'},
        {lx: '武器系统属性', field:'ZYSJ', mc: '武器的左右射角', value: '', lg: '度', bz: '武器的左右射角（单位：度）'},
        {lx: '武器系统属性', field:'DYZTFS', mc: '弹药的装填方式', value: '', lg: '', bz: '弹药的装填方式'},
        {lx: '武器系统属性', field:'DYJS', mc: '弹药的装填基数', value: '', lg: '', bz: '弹药的装填基数'},
      ],
    }
  },
  created() {
    this.getDicList();
    this.getStaticList();
  },
  methods:{
    getStaticList(){
      let gjMap = this.staticDataList.map(item => {return { label: item.lx, value: item.lx}})
      this.typeFilters = deduplicateByField(gjMap, 'label');
    },
    getDicList(){
      this.activeMenu = this.menuList[0];
    },
    clickMenu(obj){
      this.activeMenu = {...obj};
    },
    wqzbClick(obj){
      this.wqzbItem = {...obj}
      this.infoFomrVisible = true;
      this.$nextTick(() => {
        this.$refs.refTable.setFilter('lx', this.typeFilters)
      })
    },
    editCloseEvent({row, column}) {
      const $table = this.$refs.refTable;
      const field = column.property;
      const cellValue = row[field];
      this.$nextTick(() => {
        // 判断单元格值是否被修改
        if ($table.isUpdateByRow(row, field)) {
          console.log(row, field)
          // this.edit(row)
        }
      })
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 1) {
        let prevRow = this.staticDataList[rowIndex - 1];
        if (prevRow && prevRow.lx === row.lx) {
          return {rowspan: 0, colspan: 0}
        } else {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.staticDataList.length; i++) {
            if (this.staticDataList[i].lx === row.lx) {
              rowspan++;
            } else {
              break;
            }
          }
          return {rowspan, colspan: 1}
        }
      }
    },
  }
}
</script>

<style scoped lang="scss">
.basic-container{
  height: calc(100% - 20px);
  margin: 10px 5px;
  padding: 10px;
  background: url("../../assets/image/z14.png") no-repeat;
  background-size: 100% 100%;

  .main-head{
    height: 63px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 100px;
    position: relative;
    background: url("../../assets/image/basic-h.png") no-repeat;
    background-size: 100% 100%;

    .head-item{
      width: 235px;
      height: 78px;
      line-height: 78px;
      display: flex;
      justify-content: center;
      font-size: 18px;
      letter-spacing: 2px;
      font-weight: bold;
      color: #061c34;
      padding: 0 3em;
      cursor: pointer;
    }
    .headActive{
      color: #c9daf7;
      line-height: 62px;
      background: url("../../assets/image/z18.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 16px;
    }
  }
  .main-body {
    height: calc(100% - 113px);
    border-radius: 3px;
    border:1px solid #071b56;
    padding: 30px;

    .icon-items{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 30px;
      padding: 5px;
    }
    .attribute-item {
      width: 180px;
      height: 180px;
      background: url("../../assets/image/z9.png") no-repeat;
      margin: 0 auto;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        //background: #f5f7fa;
        //border-color: #409eff;
        //box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
      .attribute-name{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e0e0e0;
        font-size: 1.4em;
        font-weight: bold;
        text-align: center;
      }
      .attribute-img{
        height: calc(100% - 50px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
